* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

.box {
    width: 1200px;
    height: 550px;
    display: flex;
    flex-direction: row;
}
.img-box {
    width: 100px;
    height: 550px;
    overflow: hidden;
    transition: 0.3s;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 100%;
    }
    &:nth-child(5) {
        width: 800px;
    }
    &:hover {
        width: 800px;
        ~ .img-box:nth-child(5) {
            width: 100px;
        }
    }
}
